

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 1
//     }
//   }
//   add() {
//     // console.log("add...");
//     // console.log(this);
//     // 不要直接去修改状态，在vue中可以的，在react中，要修改状态，有一个专属的api，叫setState
//     // 是专门用来修改状态的
//     // this.state.num++; // 直接修改状态，如果是直接修改的，不会重新render
//     // console.log(this.state.num);

//     // setState 在react18中,setState永远是异步
//     this.setState({
//       num: 110
//     })
//     console.log(this.state.num);
//   }

//   render() {
//     console.log('render...');
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         {/* 在React中，绑定事件以on打头，React中帮我们封装的事件，叫合成事件 */}
//         <button onClick={this.add.bind(this)}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 1
//     }
//   }
//   add() {
//     // // this.setState 间接修改状态
//     // this.setState({
//     //   // this.state.num++  叫直接修改状态，不推荐
//     //   // this.state.num++  ++在后,整体的值是旧值  1  this.state.num++的值永远是1
//     //   // ++在前,整体的值是新值
//     //   // 不管是放前还是放后,都是直接修改状态,不推荐,不推荐
//     //   num: this.state.num++
//     // })


//     // this.state.num + 1  这样写,仅仅是使用了老状态
//     // this.state.num + 1  => 得到一个新状态  把新的状态赋值给num
//     // 下面的写法,只有一次间接地修改状态
//     // 新状态由老状态计算出来,新状态和两状态之间是有关系
//     console.log("start:" + this.state.num);
//     this.setState({
//       num: this.state.num + 1
//     })
//     console.log("end:" + this.state.num);
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         {/* 在React中，绑定事件以on打头，React中帮我们封装的事件，叫合成事件 */}
//         <button onClick={this.add.bind(this)}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;


// ---------------------------------------


// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 1
//     }
//   }
//   add() {
//     // state 形参state表示老状态
//     // this.setState((state) => {
//     //   return {
//     //     // state.num++ 直接修改老状态
//     //     // state.num + 1 使用了老状态,但是没有修改老状态
//     //     num: state.num + 1
//     //   }
//     // })

//     // this.setState(state =>({num: state.num + 1}))
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         {/* 在React中，绑定事件以on打头，React中帮我们封装的事件，叫合成事件 */}
//         <button onClick={this.add.bind(this)}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;


// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 1
//     }
//   }
//   add() {
//     // console.log("start...", this.state.num);
//     // this.setState({
//     //   num: this.state.num + 1
//     //   // 当状态修改完毕后,会执行callback, 在callback中就可以获取最新的状态
//     // }, function () {
//     //   console.log("callback...", this.state.num);
//     // })
//     // console.log("end...", this.state.num);

//     console.log("start...", this.state.num);
//     this.setState({
//       num: 110
//       // 当状态修改完毕后,会执行callback, 在callback中就可以获取最新的状态
//     }, function () {
//       console.log("callback...", this.state.num);
//     })
//     console.log("end...", this.state.num);
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         {/* 在React中，绑定事件以on打头，React中帮我们封装的事件，叫合成事件 */}
//         <button onClick={this.add.bind(this)}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------


// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 100
//     }
//   }
//   sub() {
//     // setTimeout(() => {
//     //   console.log("start...");
//     //   // 在React18之前是同步的
//     //   this.setState({
//     //     num: 10
//     //   }, () => {
//     //     console.log("setState...");
//     //   })
//     //   console.log("end...");
//     // }, 100)

//     axios.then(res => {
//       console.log("start...");
//       // 在React18之前是同步的
//       this.setState({
//         num: 10
//       }, () => {
//         console.log("setState...");
//       })
//       console.log("end...");
//     })
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         <button onClick={this.sub.bind(this)}>-1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 100
//     }
//   }
//   sub() {
//     setTimeout(() => {
//       console.log("---> 1:", this.state.num);
//       // 当调用setState就会重新render, 就会生成一颗新的Fiber树(类似于vue中的虚拟dom)
//       // 新的Fiber树和老的Fiber树会进行协调运算,类似于vue中的diff算法
//       // 理论上来说,每一次setState,都会生成新的Fiber树,都会进行协调运算,这样性能非常低
//       // 在React内部,多次setState,会进行自动合并
//       this.setState(_ => ({ num: _.num - 2 }), () => { console.log("---> 3:", this.state.num); })
//       this.setState(_ => ({ num: _.num - 2 }), () => { console.log("---> 4:", this.state.num); })
//       console.log("---> 2:", this.state.num);
//     }, 100)
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         <button onClick={this.sub.bind(this)}>-1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;


// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 100,
//       name: "wc",
//       age: 200
//     }
//   }
//   update() {
//     this.setState({
//       name: "xq"
//     })
//     this.setState({
//       age: 2000
//     })
//   }
//   render() {
//     console.log("render...");
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件</h1>
//         <h2>{num}</h2>
//         <button onClick={this.update.bind(this)}>更新</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 100,
//     }
//   }
//   // 合成事件的监听器
//   add() {
//     // 需要改变this指向
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件--{num}</h1>
//         <button onClick={this.add.bind(this)}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 100,
//     }
//   }
//   // 合成事件的监听器
//   add() {
//     // 需要改变this指向
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件--{num}</h1>
//         <button onClick={() => this.add()}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.add = this.add.bind(this)
//     this.state = {
//       num: 100,
//     }
//   }
//   add() {
//     this.setState(_ => ({ num: _.num + 1 }))
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件--{num}</h1>
//         <button onClick={this.add}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------

// import React from "react";

// class DemoA extends React.Component {

//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 100,
//     }
//   }
//   add(e, a, b) {
//     console.log(e, a, b);
//   }
//   render() {
//     let { num } = this.state;
//     return (
//       <div>
//         <h1>类组件--{num}</h1>
//         <button onClick={(e) => this.add(e, 1, 2)}>+1</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// // ---------------------------------------

import { useState } from "react";
function DemoA() {
  // 在函数式组件是没有状态,函数式组件也叫无状态组件
  // 配合hook,也可以定义状态,类似于vue3中的组合式api
  // hook是react16.8就有了,hook在三四年前就有了
  let [num, setNum] = useState(0);
  let add = () => {
    // num是旧值  不要num++,这样是直接修改旧值
    // num+1得到新值
    // setNum(num+1)

    // 第1次点击时没有变成2,为什么?
    // setNum(num++) 修改了两次num   第1次是num++,直接修改num,直接修改肯定是不推荐
    // 第2次是通过setNum间接修改
    // 这样代码,不好,不要直接去修改旧值
    setNum(num++)
  }
  return (
    <div>
      <h2>函数式组件</h2>
      <h3>{num}</h3>
      <button onClick={add}>+1</button>
    </div>
  )
}
export default DemoA;

// ---------------------------------------

// import { useState } from "react";
// function DemoA() {
//   // 在V18之前, setNum在宏任务和then中是同步的,在合成事件是异步的
//   // 在V18中,setNum无论写在什么地方,都是异步的
//   // setNum 没有第2个参数callback
//   // setNum还有一种写法
//   let [num, setNum] = useState(1);
//   let add = () => {
//     console.log("start:", num);
//     // setNum(num + 1)

//     // setNum(function (num) {
//     //   return num + 1
//     // })
//     // setNum(num => num + 1)
//     setNum(_ => _ + 1)

//     console.log("end:", num);
//   }
//   return (
//     <div>
//       <h2>函数式组件</h2>
//       <h3>{num}</h3>
//       <button onClick={add}>+1</button>
//     </div>
//   )
// }
// export default DemoA;
